<template>
  <div class="my-order">
    <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="goback()" fixed />
    <van-tabs v-model="active" sticky>
      <van-tabs v-model="active">
        <van-tab title-active-color="red" title="全部">
          <div class="goods">
            <div class="goods-num" v-if="loop=agg">
              &nbsp;&nbsp; 订单编号:&nbsp;&nbsp;
              <span>1909031918415076</span>
            </div>
            <div v-else></div>
            <div class="goods-nav" v-for="item in goodsInfo" :key="item.ID">
              <van-card
                :num="item.count"
                :price="item.CurrentPrice"
                :desc="item.Means"
                :title="item.Name"
                :thumb="item.img_url"
              />
            </div>
            <div class="goods-address">
              <div v-if="loop=agg">
                <div>
                  <span>收货人:</span>
                  <span>{{useradd.name}}</span>
                </div>
                <div>
                  收货地址:
                  <span>{{useradd.address}}</span>
                </div>
              </div>
              <div v-else></div>
              <van-submit-bar
                :price="$store.getters.getNewPrice.plice*100"
                button-text="立即付款"
                @submit="onSubmit"
              >
                <van-dialog cancelButtonText='等等,我先考虑一下...' confirmButtonText='ok,我已付款成功' v-model="show" title="" show-cancel-button>
                  <img style="width:200px;height:200px;margin-left:20%" src="../../../assets/erweima.png" />
                </van-dialog>
              </van-submit-bar>

            </div>
          </div>
        </van-tab>
        <van-tab title="已处理"></van-tab>
        <van-tab title="已完成"></van-tab>
        <van-tab title="其他订单"></van-tab>
      </van-tabs>
    </van-tabs>
  </div>
</template>

<script>

export default {
  name: '',
  data: () => ({
    active: 0,
    useradd: [],
    show: false,
    goodsInfo: [],
    agg: false

  }),
  methods: {
    goback() {
      this.$router.go(-1)
    },
    onSubmit() {
      // 这是拿取 存储中收货地址的信息
      const userAddress = JSON.parse(localStorage.getItem('address') || '[]')
      this.useradd = userAddress[0]
      console.log(userAddress)
      if (userAddress.length === 0) {
        this.$dialog
          .alert({
            title: '您还未填收货地址,请先填写收货地址'
          })
          .then(() => {
            this.$router.push('/usermy/address')
          })
      } else {
        this.show = true
      }
    },
    getUser() {
      // 这是 拿取存储中的用户名跟密码
      const add = JSON.parse(localStorage.getItem('user') || '[]')
      // console.log(add)
      // this.userAdd = add[0]
    },
    getGoods() {
      // 这是拿取购物车里已经购买的东西
      this.goodsInfo = JSON.parse(localStorage.getItem('sendCat') || '[]')
      // console.log(this.goodsInfo)
    },
    getAddress() {
      const userAddress = JSON.parse(localStorage.getItem('address') || '[]')
      this.useradd = userAddress[0]
      if (this.useradd.length !== 0) {
        this.agg = true
      } else {
        this.agg = false
      }
    }

  },
  created() {
    this.getUser()
    this.getGoods()
    this.getAddress()
  }
}
</script>

<style lang="less" scoped>
.my-order {
  .van-tab--active {
    color: #02d4d7;
  }
}
.goods {
  padding-left: 18px;
  .goods-num {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #dddddd;
  }
  .goods-nav {
    border-bottom: 1px solid #dddddd;
    .van-card {
      background-color: white;
    }
  }
}
.van-submit-bar {
  position: relative;
  margin-top: 10px;
  box-sizing: border-box;
}
</style>
